Using CSS to get expandable cell

[Manil]

I usually have no problem with Firefox, but here is a rare instance of IE displaying a table with image slices correctly and Firefox adding space where I seemingly have none. Is there anything I can do to fix this? Reasons for the problem may be that I have a cell in the table that acts as an expandable cell so that one can adjust the window and it will widen to keep the header at 98% of the window. Also, there is a text box and a menu box inside cells.

Can this be redone, without tables, using CSS and still give me the functionality I want and not fracture under different browsers or window sizes?

This is the code I have-

<table border="0" cellpadding="0" cellspacing="0" width="99%" bgcolor="#000066" height="62" style="height: 62px;">
<!-- fwtable fwsrc="cpindex_header.png" fwbase="cpindex_header.jpg" fwstyle="Dreamweaver" fwdocid = "1727768851" fwnested="0" -->
<tr>
<td width="179" style="background-color: white;"><img src="images/spacer.gif" width="179" height="1" border="0" alt=""></td>
<td style="background-color: white;"><img src="images/spacer.gif" width="9" height="1" border="0" alt=""></td>
<td style="background-color: white;"><img src="images/spacer.gif" width="344" height="1" border="0" alt=""></td>
<td style="background-color: white;"><img src="images/spacer.gif" width="59" height="1" border="0" alt=""></td>
<td width="109" style="background-color: white;"><img src="images/spacer.gif" width="109" height="1" border="0" alt=""></td>
<td width="1" height="1" style="background-color: white;"><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
</tr>
<tr>
<td width="179" rowspan="2" height="54"><a href=""><img name="cpindex_header_r1_c1" src="images/cpindex_header_r1_c1.jpg" width="179" height="54" border="0"></a></td>
<!--- THIS IS THE EXPANDABLE CELL --->
<td rowspan="3" height="60" style="background-image: url(images/cpindex_header_r1_c2.jpg); height: 60px; background-color: navajowhite;"></td>
<td width="403" colspan="2" height="27" style="height: 27px;"><img name="cpindex_header_r1_c3" src="images/cpindex_header_r1_c3.jpg" width="403" height="27" border="0" usemap="#m_cpindex_header_r1_c3" alt="C&amp;P Index Home"></td>
<td rowspan="3" width="109" height="60" style="background-image: url(images/cpindex_header_r1_c4.jpg); font-family: Arial Narrow; height: 60px;">
<a href="" class="navbar1">Advanced Search</a><br>
<!--- SECURITY CHECK --->
<CFIF IsDefined("cookie.matrix_admin")>
<!--- <A href="search_form.cfm?search_switch=adv_search" class="navbar1">Custom Reports</A><br> --->

<!--- Check to see if the cookie has enough elements for the check --->
<CFIF #ListLen(cookie.matrix_admin, "_")# GT "2">
<!--- Check what sort of administrator it is. --->
<!--- there's a CFSWITCH here that's been redacted --->

<!--- Show the logout link --->
<a href="matrix_logout.cfm" class="navbar1">Log Out</a><br>
<CFELSE>
<!--- If the cookie is too short (probably zero elements) assume the user has logged out. --->
<a href="matrix_login.cfm" class="navbar1">Log In</a><br>
</CFIF>
<CFELSE>
<a href="" class="navbar1">About</a> <br>
</CFIF>
<!--- SECURITY CHECK --->
<CFIF cookie.v_hide NEQ "Y">
<!--- there's a bunch of CFIFs and CFLOOPS here that've been redacted --->
</CFIF>

</td>
<td height="27" style="height: 27px; background-color: white;"><img src="images/spacer.gif" width="1" height="27" border="0" alt=""></td>
</tr>

<tr>
<td width="344" rowspan="2" style="background-image: url(images/cpindex_header_r2_c3.jpg); text-align: right;">
<input name="docu_title" type="text" onfocus="value=''" value="Name/Word" size="15" maxlength="30" style="margin-right: .3em;">
<select name="cat_list" style="margin-top: .3em; margin-right: .3em;">
<option value="" selected>All</option>
<option value="PROC">Process</option>
<option value="201">Command Media</option>
<option value="240">IDS Site Manual/Proc</option>
<option value="204">Forms/Checklists</option>
<option value="203">Training Courses</option>
<option value="210">Briefing</option>
<option value="208">Reference</option>
<option value="205">Team</option>
<option value="66">Team Member</option>
</select>
<input name="searchtype" type="hidden" value="title">
<input name="meth" type="hidden" value="res_by_title">

<input type="button"
name="Submit"
value="&gt;&gt;"
onclick="if(this.value == '&gt;&gt;') this.form.submit(); this.value = '-X-';">
</td>

<td width="59" rowspan="2" height="33"><img name="cpindex_header_r2_c4" src="images/cpindex_header_r2_c5.jpg" width="59" height="33" border="0" alt=""></td>
<td height="27" style="height: 27px; background-color: white;"><img src="images/spacer.gif" width="1" height="27" border="0" alt=""></td>
</tr>

<tr>
<td height="6"><img name="cpindex_header_r3_c1" src="images/cpindex_header_r3_c1.jpg" width="179" height="6" border="0" alt=""></td>
<td height="6" style="height: 6px; background-color: white;"><img src="images/spacer.gif" width="1" height="6" border="0" alt=""></td>
</tr>
</table>

[Stang02GT]

Please use code tags when posting code.

If you search around there have been a lot of questions dealing with IE7 and Firefox displaying things differently.

I gave another memeber the same advice i am going to give you. Google this issue, there are tons of information out there on this.


What you can do is attach an IE specific style sheet so that what you are doing displays correctly in IE

LINK


In the mean time i am preparing a tutorial on this subject, because of the amount of questions I see on this issue.